<!-- <template>
  <fieldset>
    <legend>App组件</legend> -->
    <!-- <Error> -->
      <!-- 自定义指令 -->
      <!-- <customDirectiveVue></customDirectiveVue> -->
      <!-- setup钩子 -->
      <!-- <setup :num="num">
        <h1>一个插槽</h1>
      </setup> -->
      <!-- 响应式语法 -->
      <!-- <refCom></refCom> -->
      <!-- <reactive></reactive> -->
      <!--vue3的选项式methods -->
      <!-- <methodsCom></methodsCom> -->
      
      <!-- 11月22日练习 -->
      <!-- <lx></lx> -->
      <!-- <todolist></todolist> -->
      <!-- <practiveCom></practiveCom> -->

      <!-- define组件 -->
      <!-- <defineApi></defineApi> -->
      <!-- 计算属性 -->
      <!-- <computedCom></computedCom> -->
      <!-- 侦听器 -->
      <!-- <watchCom :testVal="testVal" :testVal2="testVal2"></watchCom> -->
      <!-- <watchEffectCom></watchEffectCom> -->
      <!-- <watchEffectExam></watchEffectExam> -->

      <!-- 自定义指令 -->
      <!-- <customDirective ></customDirective> -->
    <!-- </Error>  -->
  <!-- </fieldset>
</template> -->
<!-- <script setup> -->
// import customDirectiveVue from './components/CustomDirective.vue';
// import setup from "./components/setup.vue"
// import refCom from "./components/ref.vue"
// import reactive from "./components/reactive.vue"
// import methodsCom from "./components/methods.vue"
// import lx from "./components/练习.vue"
// import todolist from "./components/todolist/index.vue"
// import practiveCom from "./components/practives/index.vue"
// import defineApi from "./components/defineApi/index.vue"
// import computedCom from "./components/computed.vue"
// import Error from "./components/Error.vue"
// import watchCom from "./components/watchCom.vue"
// import { ref } from "vue"
// let testVal = ref('德国')
// let testVal2 = ref('日本')
// import watchEffectCom from "./components/watchEffect.vue"
// import watchEffectExam from './components/watchEffect失效函数的应用.vue';
// import customDirective  from "./components/自定义指令.vue"

// export default{
//   data(){
//       return{
//         num:10
//       }
//     },
//   components:{ 
//     customDirectiveVue,
//     setup,
//     refCom,
//     reactive,
//     methodsCom,
//     lx,
//   }
// }
<!-- </script> -->
<template>
    <!-- <h1>APP</h1>
    <breadCrumb :data="data" separator="(#^.^#)"></breadCrumb>
    <router-view></router-view> -->

    <!-- <div class="dev">
      <h1>less</h1>
    </div>
    <div class="dev2">
      <h1>dev2</h1>
    </div>
    <div class="dv3">
      <h3>dv3</h3>
      <h4 class="hh">
        <i>dv4 111</i>
      </h4>
    </div> -->

    <users /> 
    <Other></Other>
    <!-- <Products></Products>
    <hr>
    <Carts></Carts> -->
    
</template>
<script setup>
// import {onMounted, ref,getCurrentInstance} from "vue"
// let data = ref([])
// 1.在setup中如何使用eventBus
// 2.reactive声明的变量重新赋值，丢失响应
// 3.如何获取全局的properties属性
// 4.全局创建组件&简单封装面包屑
// onMounted(()=>{
//   // console.log(getCurrentInstance());//appContext=>config=>globalProperties=>($bus)
//   let instance =getCurrentInstance()//获取组件实例
//   // 获取app全局的添加的属性
//   let $bus = instance.appContext.config.globalProperties.$bus
//   // 总线传参，App.vue和guard之间传递面包屑的数据
//   // 在guard的index.js中，通过to.matched获取到的面包屑数据，传来给input,将input的数据传给data(传给breadCrumb)
//   $bus.$on('breadChange',input=>{
//     console.log(input);
//     data.value = input;
//   })
// })


import users from "./components/users.vue"
import Other from "./components/other.vue"
import Carts from "./components/Carts/index.vue"
import Products from "./components/Products/index.vue"
</script>
<style lang="less" scoped>
// 导入（Importing）------@import "";(分号不要忘记)
@import "./assets/test.less";
.dev{
  color:pink;
  background:black;
  font-size:30px;
  border:2px solid deepskyblue;
}
// 混合（Mixins）
.dev2{
  .dev()
}
// 嵌套（Nesting）
.dv3{
  .hh{
    color:blue;
    i{
      font-size:20px
    }
  }
}
//  注释（Comments）
// 块注释和行注释都可以使用：

// /* 一个块注释
//  * style comment! 会被编译到css中 */ 

// /*!压缩也会编译*/

// // 这一行被注释掉了！不会编译到css



</style>
